<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>四川麻将危险牌预测算法</title>
    <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <style>
        .type {
            /*border: red solid 1px;*/
            /*outline: #99ccff solid 5px;*/
            /*position: center;*/
            /*display: flex;*/
        }

        .mjSubContainer {
            float: left;
            /*border: red solid 1px;*/
            width: 48%;
        }

        .mjContainer {
            position: center;
            margin-bottom: 15px;
        }

        .clear {
            clear: both;

        }

        .userContainer {
            margin-bottom: 15px;
        }

        .dangerBorder {
            /*border: ;*/
            outline: red 5px solid;
        }
    </style>
    <script>
        let ipAddr = 'localhost:9090'; // localhost:8080, 120.78.240.142:8686
        $(function () {
                // 添加牌得图片
                function addCards() {
                    var cs = $(".mjSubContainer");
                    for (var i = 0; i < 3; i++) { // 3种类型
                        var newDiv = $('<div class="type"></div>');

                        var c = 'w';
                        if (i === 0) c = 't';
                        else if (i === 1) c = 'y';

                        for (var j = 1; j <= 9; j++) { // 9种数字的牌
                            newDiv.append(
                                '<div style="float: left; margin-left: 5px">\n' +
                                '    <img src="image/' + c + j + '.jpg" alt="' + c + j + '"> <br/>\n' +
                                '    <p style="text-align: center; margin-top: 0">4</p>\n' +
                                '</div>');
                        }

                        newDiv.append('<div class="clear"></div>')

                        cs.append(newDiv);
                    }
                }

                // 给图片添加点击事件
                function addClickEvent() {
                    // 图片的事件
                    var children = $(".remainCards").children();
                    var imgs = children.find("img");
                    imgs.click(function () {
                        var next = $(this).next().next();
                        next.text(Math.max(0, next.text() - 1));
                    });

                    // 数字上的事件
                    var ps = children.find('p');
                    ps.click(function () {
                        $(this).text(Math.min(4, Number($(this).text()) + 1));
                    });

                    // already_hu选择框的事件
                    $(".userContainer").children().each(function () { // 每个用户
                        var user = $(this);
                        user.find('input[name=alreadyHu]').click(function () {
                            var meBox = $(this);
                            meBox.attr('value', meBox.attr('value') !== 'true');
                        });
                    });
                }

                // 标记危险牌
                function showDanger(gameData) {
                    console.log(gameData);
                    let terms = gameData.terms;
                    let dangers = $(".dangerCards").find("div.type");

                    for (let ti = 0; ti < terms.length; ti++) {
                        let term = terms[ti];
                        let index = 0;
                        if (term.type === 'TIAO') index = 1;
                        else if (term.type === 'WAN') index = 2;

                        let pTags = dangers.eq(index).find("p");
                        let imgTags = dangers.eq(index).find("img");
                        let cards = term.danger;

                        for (let i = 0; i < 9; i++) {
                            let t = cards[i + 1];
                            var pTag = pTags.eq(i);
                            var imgTag = imgTags.eq(i);
                            pTag.html(t === 0 ? 0 : 1);
                            if (t === 0) {
                                imgTag.removeClass('dangerBorder');
                            } else {
                                imgTag.addClass('dangerBorder');
                            }
                        }
                    }
                }

                function test() {
                    $("#test").click(function () {
                        let dangers = $(".dangerCards").find("div.type");
                        let eq = dangers.eq(1);
                        let imgTags = eq.find("p");
                        var imgTag = imgTags.eq(5);
                        imgTag.addClass('dangerBorder');
                    });
                }

                // 查询结果按钮事件
                function addClickEventToSubmit() {
                    $("#query").click(function () {
                        // var data = {
                        //     players: [
                        //         {cards_num: 10, alreadyHu: true, lack: "WAN"},
                        //         {cards_num: 13, alreadyHu: false, lack: "TONG"}],
                        //     terms: [{cards: [1, 2, 3, 4], type: 'TONG'}, {cards: [4, 3, 2, 1], type: 'TIAO'}]
                        // };
                        // console.log(data);
                        $.ajax({
                            url: "http://" + ipAddr + "/ajax",
                            type: 'POST',
                            // dataType: 'JSON',
                            contentType: 'application/json',
                            data: JSON.stringify(collectData()),
                            success: function (gameData, status) {
                                console.log('查询结果成功，状态码：' + status);
                                showDanger(gameData);
                            },
                            error: function (msg) {
                                console.log(msg);
                            }
                        })
                    });
                }

                // 收集剩余牌数据
                function collectTerms() {
                    var terms = [];
                    var cards = [];
                    var type = $(".remainCards").each(function () {
                        $(this).find('p').each(function () {
                            cards.push($(this).text());
                        });
                    });
                    for (let i = 0; i < 3; i++) {
                        let tcs = [];
                        tcs.push(0); // 第一张牌默认是0
                        for (let j = 0; j < 9; j++) {
                            tcs.push(cards[i * 9 + j]);
                        }
                        let type = 'WAN';
                        if (i === 0) type = 'TONG';
                        else if (i === 1) type = 'TIAO';
                        terms.push({cards: tcs, type: type});
                    }
                    return terms;
                }

                // 收集用户信息
                function collectUsers() {
                    let users = [];
                    $(".userContainer").children().each(function () { // 每个用户
                        var user = $(this);
                        //{cards_num: 10, alreadyHu: true, lack: "WAN"}
                        users.push({
                            cards_num: user.find('input[name="cards_num"]').val(),
                            lack: (user.find('input[name="lack"]:checked').val()),
                            alreadyHu: user.find('input[name="alreadyHu"]').attr('value')
                        });
                    });
                    return users;
                }

                // 收集对局数据
                function collectData() {
                    var terms = collectTerms();
                    var users = collectUsers();

                    return {
                        players: users,
                        terms: terms
                    };
                }

                addCards();
                $(".dangerCards").find('p').text(0); // 危险牌清零
                addClickEvent();
                addClickEventToSubmit();
                test();

                $("#clean").click(function () {
                    $(".remainCards").find('p').text(0);
                });
            }
        );
        function testToShowDanger(gameData){
            console.log(gameData);
            let terms = gameData.terms;
            let dangers = $(".dangerCards").find("div.type");

            for (let ti = 0; ti < terms.length; ti++) {
                let term = terms[ti];
                let index = 0;
                if (term.type === 'TIAO') index = 1;
                else if (term.type === 'WAN') index = 2;

                let pTags = dangers.eq(index).find("p");
                let imgTags = dangers.eq(index).find("img");
                let cards = term.danger;

                for (let i = 0; i < 9; i++) {
                    let t = cards[i + 1];
                    var pTag = pTags.eq(i);
                    var imgTag = imgTags.eq(i);
                    pTag.html(t === 0 ? 0 : 1);
                    if (t === 0) {
                        imgTag.removeClass('dangerBorder');
                    } else {
                        imgTag.addClass('dangerBorder');
                    }
                }
            }

        }
    </script>
</head>
<body>
<div class="userContainer">
    <div>
        牌量：<input type="number" value="13" name="cards_num"><br>
        缺牌：<input type="radio" value="TONG" name="lack" checked>筒|<input type="radio" value="TIAO" name="lack">条|<input
            type="radio" value="WAN" name="lack">万<br>
        已胡：<input type="checkbox" value="false" name="alreadyHu"><br>
    </div>
</div>
<div class="mjContainer">
    <div class="mjSubContainer remainCards"></div>
    <div class="mjSubContainer dangerCards"></div>
    <div class="clear"></div>
</div>
<div class="submitContainer">
    <input id="query" type="button" value="查询结果"><br>
    <input hidden id="test" type="button" value="测试"><br>
    <input id="clean" type="button" value="清空"><br>
</div>
</body>
</html>